// 家庭信息
<template>
    <el-card class="box-card">
        <!-- Tabs标签页 -->
        <div style="margin-bottom: 20px">
            <el-button size="medium" @click="addInfoDialogVisible  = true">添加家庭信息</el-button>
        </div>
        <el-tabs v-model="editableTabsValue" type="card" closable @tab-remove="removeTab">
            <el-tab-pane v-for="(item, index) in personalList" :key="index" :label="item.personalName" :name="numToStr(item.id)">
            <!-- Card 卡片标签页 -->
            <el-card>
            <div slot="header" class="clearfix">
                <span>个人信息</span>
                
                <el-button @click="updateInfoPersonalBtn(item.personalName)" style="float: right; padding: 3px 0" type="text">修改</el-button>
            
            </div>
            <div class="text item">
                <div>
                {{'姓名： ' +"&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;"+ item.personalName }}
                </div>
                <div>
                {{'性别： ' +"&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;"+ item.personalSex }}
                </div>
                <div>
                {{'出生日期： ' +"&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;"+ $moment(item.personalBirth).format('YYYY年MM月DD日')}}
                </div>
                <div>
                {{'年龄： ' +"&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;"+ item.personalAge }}
                </div>
                <div>
                {{'星座： ' +"&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;"+ item.personalConstellation }}
                </div>
                <div>
                {{'血型： ' +"&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;"+ item.personalBlood }}
                </div>
                <div>
                {{'亲属关系： ' +"&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;"+ item.personalRelation }}
                </div>
            </div>
            </el-card>
            </el-tab-pane>
        </el-tabs>


        <!-- 添加家庭信息 -->
        <el-dialog title="添加家庭信息" :visible.sync="addInfoDialogVisible" width="50%"  @close="addInfoClose">
            <el-form :model="addInfoRefModel" :rules="addInfoCat" ref="addInfoRef" label-width="100px" class="demo-ruleForm">
                <el-form-item label="姓名"  prop="personalName">
                <el-input v-model="addInfoRefModel.personalName"></el-input>
                </el-form-item>

                <el-form-item label="性别"  prop="personalSex">
                    <el-radio-group v-model="addInfoRefModel.personalSex">
                        <el-radio v-model="radio" label="男">男</el-radio>
                        <el-radio v-model="radio" label="女">女</el-radio>
                    </el-radio-group>
                </el-form-item>

                <el-form-item label="出生日期"  prop="personalBirth">
                <el-date-picker v-model="addInfoRefModel.personalBirth" align="right" type="date" placeholder="选择日期" :picker-options="pickerOptions">
                </el-date-picker>
                </el-form-item>

                <el-form-item label="年龄"  prop="personalAge">
                <el-input v-model="addInfoRefModel.personalAge" class="b"  name="age" placeholder="请输入年龄..."></el-input>
                </el-form-item>

                <el-form-item label="星座"  prop="personalConstellation">
                <el-select v-model="addInfoRefModel.personalConstellation" placeholder="请选择星座">
                    <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
                    </el-option>
                </el-select>
                </el-form-item>

                <el-form-item label="血型"  prop="personalBlood">
                <el-select v-model="addInfoRefModel.personalBlood" placeholder="请选择血型">
                    <el-option v-for="item in options2" :key="item.value2" :label="item.label" :value="item.value2">
                    </el-option>
                </el-select>
                </el-form-item>

                <el-form-item label="亲属关系"  prop="personalRelation">
                <el-input v-model="addInfoRefModel.personalRelation" placeholder="请输入亲属关系">
                </el-input>
                </el-form-item>
            </el-form>

            <span slot="footer" class="dialog-footer">
                <el-button @click="addInfoDialogVisible = false">取 消</el-button>
                <el-button type="primary" @click="addTabPersonal">确 定</el-button>
            </span>
        </el-dialog>
                
        <!-- 修改家庭信息 -->
        <el-dialog title="添加家庭信息" :visible.sync="alterInfoDialogVisible" width="30%"  @close="alterInfoClose">
            <el-form :model="updateInfoRefModel" :rules="addInfoCat" ref="addInfoRef" label-width="100px" class="demo-ruleForm">
                <el-form-item label="姓名"  prop="personalName">
                <el-input v-model="updateInfoRefModel.personalName"></el-input>
                </el-form-item>

                <el-form-item label="性别"  prop="personalSex">
                    <el-radio-group v-model="updateInfoRefModel.personalSex">
                        <el-radio v-model="radio" label="男">男</el-radio>
                        <el-radio v-model="radio" label="女">女</el-radio>
                    </el-radio-group>
                </el-form-item>

                <el-form-item label="出生日期"  prop="personalBirth">
                <el-date-picker v-model="updateInfoRefModel.personalBirth" width="50%" align="right" type="date" placeholder="选择日期" :picker-options="pickerOptions">
                </el-date-picker>
                </el-form-item>

                <el-form-item label="年龄"  prop="personalAge">
                <el-input v-model="updateInfoRefModel.personalAge" class="b"  name="age" placeholder="请输入年龄..."></el-input>
                </el-form-item>

                <el-form-item label="星座"  prop="personalConstellation">
                <el-select v-model="updateInfoRefModel.personalConstellation" placeholder="请选择星座">
                    <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
                    </el-option>
                </el-select>
                </el-form-item>

                <el-form-item label="血型"  prop="personalBlood">
                <el-select v-model="updateInfoRefModel.personalBlood" placeholder="请选择血型">
                    <el-option v-for="item in options2" :key="item.value2" :label="item.label" :value="item.value2">
                    </el-option>
                </el-select>
                </el-form-item>

                <el-form-item label="亲属关系"  prop="personalRelation">
                <el-input v-model="updateInfoRefModel.personalRelation" placeholder="请输入亲属关系">
                </el-input>
                </el-form-item>
            </el-form>

            <span slot="footer" class="dialog-footer">
                <el-button @click="alterInfoDialogVisible = false">取 消</el-button>
                <el-button type="primary" @click="updateInfoSubmitS">确 定</el-button>
            </span>
        </el-dialog>                                 
    </el-card>

    
</template>

<script>
export default {
    data() {
    return {
            options: [
            {value: '白羊座',label: '白羊座（03月22日～04月20日）'},
            {value: '金牛座',label: '金牛座（04月21日～05月21日）'},
            {value: '双子座',label: '双子座（05月22日～06月21日）'}, 
            {value: '巨蟹座',label: '巨蟹座（06月22日～07月23日）'}, 
            {value: '狮子座',label: '狮子座（07月24日～08月24日）'}, 
            {value: '处女座',label: '处女座（08月25日～09月24日）'}, 
            {value: '天秤座',label: '天秤座（09月25日～10月23日）'}, 
            {value: '天蝎座',label: '天蝎座（10月24日～11月22日）'}, 
            {value: '射手座',label: '射手座（11月23日～12月20日）'}, 
            {value: '摩羯座',label: '摩羯座（12月23日～01月20日）'}, 
            {value: '水瓶座',label: '水瓶座（01月21日～02月19日）'}, 
            {value: '双鱼座',label: '双鱼座（02月20日～03月21日）'}
            ],
            value: '',
            pickerOptions: {
            disabledDate(time) {
                return time.getTime() > Date.now();
            },
            shortcuts: [
                {text: '今天',onClick(picker) 
                {picker.$emit('pick', new Date());}}, 
                {text: '昨天',onClick(picker) 
                {const date = new Date();date.setTime(date.getTime() - 3600 * 1000 * 24);picker.$emit('pick', date);}}, 
                {text: '一周前',onClick(picker) 
                {const date = new Date();date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);picker.$emit('pick', date);}}
                ]
            },
            options2: [
                {value2: 'A型',label: 'A型'}, 
                {value2: 'B型',label: 'B型'}, 
                {value2: 'AB型',label: 'AB型'}, 
                {value2: 'O型',label: 'O型'}, 
                {value2: 'RH型',label: 'RH型'}
                ],

            input: '',
            value2: '',
            value3: '',
            radio: '1',
            textarea: '',
            addInfoRefModel: {
            personalName: '',
            personalSex: '',
            personalBirth: '',
            personalAge: '',
            personalConstellation: '',
            personalBlood: '',
            personalRelation: '',
            },
    
        addInfoDialogVisible: false,
        alterInfoDialogVisible: false,
        alterInfoRefModel:{
            alterInfoname:''
        },
        addInfoCat: {
                PersonalName: [
                        { required: true, message: '姓名不能为空，请先输入名称', trigger: 'blur' },
                        ]
            },
        editableTabsValue: '',
        personalList:[],
        updateInfoRefModel:{

        },
        tabIndex: 2,
    };
    },
     //页面进行初始化的时候开始调用回调函数
        created(){
            //动态获取相册信息
            this.getTabPersonal()
            //设定模式选中按钮
            // this.defaultActive = window.sessionStorage.getItem("activeMenu")

        },
    methods: {
        async updateInfoPersonalBtn(personalName){
            console.log("personalName"+personalName)
            this.alterInfoDialogVisible= true;
			const {data: result} = await this.$http.get("/personals/"+personalName)
			if(result.status !== 200) return this.$message.error("列表查询失败")
        	//如果程序执行成功,则将查询得到的User对象赋值给Vue中的属性
			this.updateInfoRefModel = result.data
			console.log(this.updateInfoRefModel)
        },
        async updateInfoSubmitS(){
            this.alterInfoDialogVisible = true
           //根据接口文档要求封装数据
			let personal = {}
            personal.id=this.updateInfoRefModel.id
			personal.personalName=this.updateInfoRefModel.personalName
			personal.personalSex = this.updateInfoRefModel.personalSex
			personal.personalBirth = this.updateInfoRefModel.personalBirth
			personal.personalAge = this.updateInfoRefModel.personalAge
			personal.personalConstellation = this.updateInfoRefModel.personalConstellation
			personal.personalBlood = this.updateInfoRefModel.personalBlood
			personal.personalRelation = this.updateInfoRefModel.personalRelation
			const {data: result} = await this.$http.put("/personals/updateInfoSubmit",personal)
			if(result.status !== 200) return this.$message.error("信息修改失败")
			this.$message.success("信息更新成功")
			this.alterInfoDialogVisible = false
			this.getTabPersonal()
        },
        // 将数字转化为字符串
        numToStr(num) {
            num = num.toString();
            return num;
        },
        addInfoClose(){
        //重置表格数据
        this.$refs.addInfoRef.resetFields()
        },
        alterInfoClose(){
        //重置表格数据
        this.$refs.addInfoRef.resetFields()
        },
        //查询标签
        async getTabPersonal(){
        const { data: result } = await this.$http.get("/personals/getTabPersonal");
            if (result.status !== 200) return this.$message.error("信息查询失败");
            this.personalList = result.data;
            console.log(this.personalList)
            this.addInfoDialogVisible=false;
        },
        //添加标签
        addTabPersonal(targetName) {
            this.$refs.addInfoRef.validate(async valid => {
            //如果校验失败 则停止数据
            if(!valid) return this.$message.error("请输入相册名称必填项")
            console.log(this.addInfoRefModel)
            const {data: result} = await this.$http.post('/personals/savePersonal',this.addInfoRefModel)
            if(result.status !== 200) return this.$message.error("信息添加失败");
            
            this.$message.success("信息添加成功")
            //关闭对话框
            this.addPhotoItemCatDialogVisible = false
            //重置页面数据
            this.getTabPersonal()
            })

        },
        // 删除标签
        async removeTab(targetName) {
            console.log(targetName)
            //消息确认框
            this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
            }).then(async () => {
            //根据id删除数据
            const {
                data: result
            } = await this.$http.delete("/personals/deletePersonalById", {
                params: {
                id: targetName
                }
            })
            if (result.status !== 200) return this.$message.error("信息删除失败！")
            this.$message.success("信息删除成功！")
            //重新获取商品列表信息
            this.getTabPersonal()
            }).catch(() => {
            this.$message({
                type: 'info',
                message: '已取消删除操作'
            });
        });
        },
    },        
};
</script>

<style lang="less" scoped>
.text {
    font-size: 14px;
}

.item {
    margin-bottom: 18px;
}

.clearfix:before,
.clearfix:after {
    display: table;
    content: "";
}
.clearfix:after {
    clear: both;
}

.box-card {
    width: 900px;
    margin-left: 285px;
}
.el-form-item{
    width: 100%;
}
.el-input__inner{
    width: 100%;
}
</style>